<script src="<?php echo Yii::app()->request->baseUrl; ?>/js/media/mediaelement.js"></script>
<link href="<?php echo Yii::app()->request->baseUrl; ?>/js/plugins/datatables/DT_bootstrap.css" rel="stylesheet">
<link href="<?php echo Yii::app()->request->baseUrl; ?>/js/plugins/responsive-tables/responsive-tables.css" rel="stylesheet">
<link href="<?php echo Yii::app()->request->baseUrl; ?>/js/plugins/lightbox/themes/evolution-dark/jquery.lightbox.css" rel="stylesheet">   
<script src="<?php echo Yii::app()->request->baseUrl; ?>/js/plugins/datatables/jquery.dataTables.js"></script>
<script src="<?php echo Yii::app()->request->baseUrl; ?>/js/plugins/datatables/DT_bootstrap.js"></script>
<script src="<?php echo Yii::app()->request->baseUrl; ?>/js/plugins/responsive-tables/responsive-tables.js"></script>
<script src="<?php echo Yii::app()->request->baseUrl; ?>/js/plugins/lightbox/jquery.lightbox.min.js"></script>
<div id="page-title" class="clearfix">		
	<ul class="breadcrumb">
		<li>
			<?php echo CHtml::link('Home',array('/site/index')); ?><span class="divider">/</span>
		</li>
		<li>
			<?php echo CHtml::link('Clip',array('/clip/admin')); ?><span class="divider">/</span>
		</li>
		<li class="active">List Clip</li>
	</ul>		
</div> <!-- /.page-title -->
<?php

Yii::app()->clientScript->registerScript('search', "
$('.search-button').click(function(){
	$('.search-form').toggle();
	return false;
});
$('.search-form form').submit(function(){
	$.fn.yiiGridView.update('clip-grid', {
		data: $(this).serialize()
	});
	return false;
});
");
?>
<div id="horizontal" class="widget widget-form">
	<div class="widget-header">	      				
		<h3>
		     <i class="icon-search"></i>
		     <?php echo CHtml::link('Advanced Search','#',array('class'=>'search-button')); ?>	      					
		</h3>	
	</div> <!-- /widget-header -->
	<div class="widget-content search-form" style="display:none">
	<?php $this->renderPartial('_search',array(
		'model'=>$model,
		'categories'=>$categories,
	)); ?>
	</div><!-- search-form -->
</div>
<div class="widget widget-table">
	<div class="widget-header">						
		<h3>
			<i class="icon-th-list"></i>
			Manage Clip						
		</h3>
	</div> <!-- /widget-header -->
	<div class="widget-content">
<?php $form=$this->beginWidget('CActiveForm', array(
    'enableAjaxValidation'=>true,
)); ?>
<?php $this->widget('zii.widgets.grid.CGridView', array(
	'id'=>'clip-grid',
	'dataProvider'=>$model->search(),
	'summaryText'=>'',
	'htmlOptions'=>array('class'=>'table table-striped table-bordered responsive'),
	'afterAjaxUpdate'=>'callbackEvent',
	'pagerCssClass'=>'pagination pagination-centered',
	'columns'=>array(
		array(
            'id'=>'autoId',
            'class'=>'CCheckBoxColumn',
            'selectableRows' => '50',   
        ),
		
		array(
            'name'=>'name',
            'type'=>'raw',
            'value'=>'"<a data=\"".$data->clip_url."\" href=\"#myModal\" class=\"btn\" data-toggle=\"modal\">".
			CHtml::image(Yii::app()->request->baseUrl."/images/icons/player-icon.png","player-icon.png",array("style"=>"max-width:60px;"))." ".$data->name."</a>"',
			'htmlOptions'=>array("width"=>"32%"),
        ),
		array(
            'name'=>'Category',
            'value'=>'$data->clipcategory[0]["name"]',
			'htmlOptions'=>array("width"=>"20%"),
        ),
		array(
			'name'=>'createddate',
			'header'=>'Created',
			'value'=>'date("d-m-Y",strtotime($data->createddate))',
		),
		array(
            'name'=>'order',
            'type'=>'raw',
            'value'=>'CHtml::textField("order[$data->id]",$data->order,array("style"=>"width:30px;"))',
            'htmlOptions'=>array("width"=>"30px"),
        ),
        array(
            'name'=>'Hot',
            'header'=>'Hot',
            'value'=>'($data->hot=="1")?("Yes"):("No")',
        ),
        array(
            'name'=>'global_order',
            'type'=>'raw',
            'value'=>'CHtml::textField("global_order[$data->id]",$data->global_order,array("style"=>"width:30px;"))',
            'htmlOptions'=>array("width"=>"30px"),
        ),
        array(
            'name'=>'Global',
            'header'=>'Global',
            'value'=>'($data->global_hot=="1")?("Yes"):("No")'
        ),
        array(
            'name'=>'active',
            'header'=>'Active',
            'value'=>'($data->active=="1")?("Yes"):("No")'
        ),
		array(
			'header'=>'Action',
			'class'=>'CButtonColumn',
			'buttons'=>array(
        		
		        'delete' => array
		        (
		            'label'=>'Delete',
		        	'imageUrl'=>Yii::app()->request->baseUrl.'/images/icons/delete-file-icon_24.png',
		        	'url'=>'Yii::app()->createUrl("clip/delete", array("id"=>$data->id))',
		        ),
		        'update' => array
		        (
		            'label'=>'Update',
		        	'imageUrl'=>Yii::app()->request->baseUrl.'/images/icons/table-edit-icon_24.png',
		            'url'=>'Yii::app()->createUrl("clip/update", array("id"=>$data->id))',
		        ),
		        'view' => array
		        (
		            'label'=>'View Video',
		        	'imageUrl'=>Yii::app()->request->baseUrl.'/images/icons/player-icon.png',
		            'url'=>'#myModal',
		        	'options'=>array("class"=>"btn",'data-toggle'=>'modal','data'=>'$data->clip_url'),
		        	'visible'=>'false',
		        ),
        	),
			'htmlOptions'=>array("width"=>"80px"),
        ),
	),
)); ?>
<?php $user_agent= $_SERVER['HTTP_USER_AGENT'];?>
<script>
function reloadGrid(data) {
    $.fn.yiiGridView.update('clip-grid');
}
function callbackEvent(){
	$('.close').click(function(){
		$('.modal-body').html('');
	});
	$('.btn').click(function(){
		$('.modal-body').html('');
		$('.modal-body').html('<video width="530" height="400" id="player1" src="" type="video/mp4" controls="controls"></video>');
		$("#player1").attr("src",$(this).attr("data"));
		<?php if(strpos((string)$user_agent, "Android")==false):?>
		MediaElement('player1', {success: function(me) {
//			me.play();
			
			me.addEventListener('timeupdate', function() {
				document.getElementById('time').innerHTML = me.currentTime;
			}, false);
			
			document.getElementById('pp')['onclick'] = function() {
				if (me.paused)
					me.play();
				else
					me.pause();
			};

		}});
		<?php else:?>
		function init() {
	    	enableVideoClicks();
	  	}
	  	function enableVideoClicks() {
		    var videos = document.getElementsByTagName("video") || [];
		    for (var i = 0; i < videos.length; i++) {
		      // TODO: use attachEvent in IE
		      videos[i].addEventListener("click", function(videoNode) {
		        return function() {
		          videoNode.play();
		        };
		      }(videos[i]));
		    }
		  }
	  	init();
	  <?php endif;?>
	});s
}
</script>
<div style="padding-top: 10px;border-top: 1px solid #cccccc;padding-left: 20px;">
<?php echo CHtml::ajaxSubmitButton('Filter',array('clip/ajaxupdate'), array(),array("style"=>"display:none;")); ?>
<?php echo CHtml::ajaxSubmitButton('Activate',array('clip/ajaxupdate','act'=>'doActive'), array('success'=>'reloadGrid'),array('class'=>'btn btn-success','style'=>'margin-right:20px;margin-bottom:5px;')); ?>
<?php echo CHtml::ajaxSubmitButton('In Activate',array('clip/ajaxupdate','act'=>'doInactive'), array('success'=>'reloadGrid'),array('class'=>'btn btn-warning','style'=>'margin-right:20px;margin-bottom:5px;')); ?>
<?php echo CHtml::ajaxSubmitButton('Active Hot',array('clip/ajaxupdate','act'=>'doHot'), array('success'=>'reloadGrid'),array('class'=>'btn btn-success','style'=>'margin-right:20px;margin-bottom:5px;')); ?>
<?php echo CHtml::ajaxSubmitButton('Inactive Hot',array('clip/ajaxupdate','act'=>'doUnhot'), array('success'=>'reloadGrid'),array('class'=>'btn btn-warning','style'=>'margin-right:20px;margin-bottom:5px;')); ?>
<?php echo CHtml::ajaxSubmitButton('Global Hot',array('clip/ajaxupdate','act'=>'doGHot'), array('success'=>'reloadGrid'),array('class'=>'btn btn-success','style'=>'margin-right:20px;margin-bottom:5px;')); ?>
<?php echo CHtml::ajaxSubmitButton('UnGlobal Hot',array('clip/ajaxupdate','act'=>'doUnGhot'), array('success'=>'reloadGrid'),array('class'=>'btn btn-warning','style'=>'margin-right:20px;margin-bottom:5px;')); ?>
<?php echo CHtml::ajaxSubmitButton('Delete',array('clip/ajaxupdate','act'=>'doDelete'), array('success'=>'reloadGrid'),array('class'=>'btn btn-danger','style'=>'margin-right:20px;margin-bottom:5px;')); ?>
<?php echo CHtml::ajaxSubmitButton('Update sort order',array('ficliplm/ajaxupdate','act'=>'doSortOrder'), array('success'=>'reloadGrid'),array('class'=>'btn btn-inverse','style'=>'margin-right:20px;margin-bottom:5px;')); ?>
<?php echo CHtml::ajaxSubmitButton('Update global order',array('clip/ajaxupdate','act'=>'doGlobalOrder'), array('success'=>'reloadGrid'),array('class'=>'btn btn-inverse')); ?>
</div>
<?php $this->endWidget(); ?>
	</div> <!-- /widget-content -->
</div> <!-- /widget -->
<div class="modal fade hide" id="myModal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h3>Video</h3>
  </div>
  <div class="modal-body">
  	
  </div>
</div>

<script type="text/javascript">
$('.close').click(function(){
	$('.modal-body').html('');
});
$('.btn').click(function(){
	$('.modal-body').html('');
	$('.modal-body').html('<video width="530" height="400" id="player1" src="" type="video/mp4" controls="controls"></video>');
	$("#player1").attr("src",$(this).attr("data"));
	<?php if(strpos((string)$user_agent, "Android")==false):?>
	MediaElement('player1', {success: function(me) {
//		me.play();
		
		me.addEventListener('timeupdate', function() {
			document.getElementById('time').innerHTML = me.currentTime;
		}, false);
		
		document.getElementById('pp')['onclick'] = function() {
			if (me.paused)
				me.play();
			else
				me.pause();
		};

	}});
	<?php else:?>
	function init() {
    	enableVideoClicks();
  	}
  	function enableVideoClicks() {
	    var videos = document.getElementsByTagName("video") || [];
	    for (var i = 0; i < videos.length; i++) {
	      // TODO: use attachEvent in IE
	      videos[i].addEventListener("click", function(videoNode) {
	        return function() {
	          videoNode.play();
	        };
	      }(videos[i]));
	    }
	  }
  	init();
  <?php endif;?>
});
</script>